<template>
  <el-dialog :title="!form.id ? '新增' : '修改'" :visible.sync="visible" :close-on-click-modal="false" width="40%" top="10vh">
    <el-form :model="form" label-width="120px" ref="dataForm">
      <el-form-item label="角色名称" prop="roleName" :rules="rules.isRange('1-10')">
        <el-input v-model="form.roleName" placeholder="请输入角色名称" maxlength="10" show-word-limit/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" maxlength="64" show-word-limit/>
      </el-form-item>
      <el-form-item label="拥有权限">
        <div style="max-height: 400px;display: block;overflow-y: scroll">
          <el-tree :data="menuList" show-checkbox node-key="menuId" ref="menuTree" check-on-click-node
                   default-expand-all :default-checked-keys="checkedKeys" :props="defaultProps">
          </el-tree>
        </div>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button icon="el-icon-close" @click.native="visible = false" size="small">取消</el-button>
      <el-button icon="el-icon-check" type="primary" :loading="isDisabled" size="small"
                 @click.native="saveOrUpdateForm(form, '/sysRole/save', '/sysRole/update')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        rules: this.getRules(),
        isDisabled: false,
        menuList: [],
        defaultProps: {
          children: 'list',
          label: 'name'
        },
        checkedKeys: [],
        form: {
          roleName: '',
          remark: '',
          createUserId: '',
          flag: 1
        }
      }
    },
    methods: {
      saveOrUpdateForm: function (form, saveUrl, updateUrl, richText) {
        let checkedKeys = this.$refs.menuTree.getCheckedKeys()
        let hafCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys()
        let menuIdList = checkedKeys.concat(hafCheckedKeys)
        form.menuIdList = menuIdList.join()
        form.halfCheckedMenuIdList = hafCheckedKeys.join()
        this.saveOrUpdate(form, saveUrl, updateUrl, richText)
      },
      init (id) {
        this.visible = true
        this.isDisabled = false
        this.menuList = []
        this.checkedKeys = []
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
        this.form.id = id
        if (id) {
          this.$http({
            url: this.$http.adornUrl('/sysRole/info/' + id)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.form = data.data
            }
          }).then(() => {
            this.$http({
              url: this.$http.adornUrl('/sysMenu/queryRoleList/' + id)
            }).then(({data}) => {
              if (data && data.code === 0) {
                let temp = this.checkedKeys
                let menuList = data.data
                menuList.forEach(function (item, index) {
                  temp.push(item.menuId)
                })
                this.$nextTick(() => {
                  this.$refs.menuTree.setCheckedKeys(temp)
                })
              }
            })
          }).then(() => {
            this.getMenu()
          })
        } else {
          this.getMenu()
        }
      },
      getMenu () {
        this.$http({
          url: this.$http.adornUrl('/sysMenu/nav?includePermission=true')
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.menuList = data.data.menuList
          }
        })
      }
    }
  }
</script>
